<template>
  <div>
    <div class="header">
      <div class="iconfont iconicon-test" @click="$router.push('/')"></div>
      <div class="toRegister" @click="$router.push('/Login')">前往登录</div>
    </div>
    <div class="logo">
      <img
        src="https://is4-ssl.mzstatic.com/image/thumb/Purple113/v4/ee/91/eb/ee91ebc6-f7e6-2fa2-356e-d5930900691b/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/1200x630wa.png"
        alt=""
      />
    </div>
    <Input
      type="text"
      placeholder="用户名/手机号"
      :rule="/^\d{5,11}$/"
      errorMsg="用户名格式错误"
      @getVal="getUsername"
    />
    <Input
      type="text"
      placeholder="昵称"
      :rule="/^[\u4E00-\u9FA5A-Za-z0-9_]{2,6}$/"
      errorMsg="昵称格式错误"
      @getVal="getNickname"
    />
    <Input
      type="password"
      placeholder="密码"
      :rule="/^\w{3,12}$/"
      errorMsg="密码格式错误"
      @getVal="getPassword"
    />
    <SubmitBtn value="注册" @clicked="submitRegister" />
  </div>
</template>

<script>
import Input from "@/components/Input.vue";
import SubmitBtn from "@/components/SubmitBtn.vue";
export default {
  components: {
    Input,
    SubmitBtn,
    username: "",
    nickname: "",
    password: "",
  },
  methods: {
    getUsername(value) {
      this.username = value;
    },
    getNickname(value) {
      this.nickname = value;
    },
    getPassword(value) {
      this.password = value;
    },
    submitRegister() {
      this.$axios({
        url: "/register",
        method: "post",
        data: {
          username: this.username,
          nickname: this.nickname,
          password: this.password,
        },
      }).then((res) => {
        const { message } = res.data;
        if (message == "注册成功") {
          this.$toast.success(message);
          setTimeout(() => {
            this.$router.replace("/Login");
          }, 800);
        } else {
          this.$toast.fail(message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 12 / 360 * 100vw;
  .iconicon-test {
    font-size: 18 / 360 * 100vw;
  }
  .toRegister {
    font-size: 14 / 360 * 100vw;
    height: 26 / 360 * 100vw;
    line-height: 26 / 360 * 100vw;
    padding: 0 10 / 360 * 100vw;
    border: 1px solid #333;
    border-radius: 14 / 360 * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180 / 360 * 100vw;
  img {
    width: 80 / 360 * 100vw;
    height: 80 / 360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
}
</style>
